<template>
	<view class="content" >
		
		<uni-row class="demo-uni-row">
			<uni-col :span="10" :offset="4">
				<view>
					<image class="headImg"  src="/static/heatText.png" mode="widthFix"/>
				</view>
			</uni-col>
			<uni-col :span="10" :offset="5">
				<view class="avator">
					<image class="img"  src="/static/headIcon.png" mode="widthFix"/>
				</view>
			</uni-col>
			
			<uni-col :span="11" :offset="7">
				<uni-forms ref="form" :modelValue="baseFormData"  :rules="rules"  class="uniForm">
					<uni-icons type="person" class="icon"  size="35"></uni-icons>
					<uni-forms-item  name="userName" class="uni-form-item">
						<input class="input" v-model="baseFormData.userName"   placeholder="用户名" />
						<!-- <uni-easyinput  prefixIcon="person"  :inputBorder="false"  placeholder="请输入用户名" /> -->
					</uni-forms-item>
					<uni-icons type="locked"  class="icon" size="35"></uni-icons>
					<uni-forms-item class="uni-form-item" name="password">
						<input class="input" v-model="baseFormData.password"  type="password"  placeholder="密码" />
						<!-- <uni-easyinput prefixIcon="locked"  class="uni-easyinput" v-model="baseFormData.password" type="password"   placeholder="请输入密码" /> -->
					</uni-forms-item>			
						<uni-data-checkbox v-model="baseFormData.isChain"  :localdata="hobbys"  @change="getCheckbox"/>			
					<button type="primary" @click="submit"  style="border-radius: 20px; width: 220px; position: relative; top: 30px; left: -28px;">登录</button>
				
				</uni-forms>
			</uni-col>
			
		</uni-row>


	</view>
</template>
<script>
	import {baseUrl} from 'libs/util/global'
	
	export default { 
		data() {
			return {
				gutter: 0,
				nvueWidth: 730,
				baseFormData: {
					userName: '',
					password: '',
					isChain: 1
				},
				ischain: null,
				// 多选数据源
				hobbys: [{
					text: '连锁店用户',
					value: 1
				},
				{
					text: '总部用户',
					value: 0
				}],
				// 表单校验
				rules: {
					userName: {
						rules: [{
							required: true,
							errorMessage: '请输入用户名',
							ValidityState: 'submit'
						}, ]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入用户密码',
							ValidityState: 'submit'
						}, ]
					},
					isChain: {
						rules: [{
							required: true,
							errorMessage: '请选择用户类型',
							ValidityState: 'submit'
						}, ]
					},
				},
			}
		},
		onLoad() {

		},
		methods: {
			
			// 去除HTML5 顶部左上角图标
			int() {
				var a = document.getElementsByClassName('uni-page-head-hd')[0]
				a.style.display = 'none';
			},
			
			getCheckbox(e){
				console.log("多选按钮："+e)
			},
			/**发布提交 */
			submit() {		
				uni.clearStorageSync();
				uni.clearStorage();
				this.$refs.form.validate().then(res => {
					console.log("登录用户名：" + this.baseFormData.userName)
					console.log("登录用户密码：" + this.baseFormData.password)
					console.log("登录用户类型：" + this.baseFormData.isChain)							
					
					uni.request({
						url:  baseUrl+'/login',
						header: {
							'content-type': 'application/json'
						},
						method: 'POST',
						data: {
							userName: this.baseFormData.userName,
							password: this.baseFormData.password,
							isChain: this.baseFormData.isChain
						},
						success: (res) => {
							console.log(res.data)
							
							if (res.data.data != null) {
								//查询权限
								uni.request({
										url: baseUrl+'/userInfo/' + res.data.data.userId + "/" +this.baseFormData.isChain,
										header: {'content-type': 'application/x-www-form-urlencoded'},
										method: 'post',
										data: {},
										success: (res) => {
											console.log("登录页面权限:"+res.data.data)										
											uni.setStorage({
												key: 'authority',
												data: res.data.data
											})	
												}
										})
								console.log(res.data.data)
								uni.setStorage({
									key: 'userId',
									data: res.data.data.userId
								})
								uni.setStorage({
									key: 'userName',
									data: res.data.data.userName
								})
								uni.setStorage({
									key: 'isChain',
									data: this.baseFormData.isChain
								})		
								uni.setStorage({
									key: 'phone',
									data: res.data.data.phone
								})						
								// 底部导航栏
								uni.switchTab({
									url: '/pages/work/work'
								})
							} else {
								console.log("登录失败")
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
									duration: 1000
								});
							}
						}
					})
					
					}).catch(err => {
										
					})
				

			}
		}
	}
</script>

<style scoped lang="less">
	
	.demo-uni-row {
			margin-bottom: 10px;
			// display: block;
			// height: 110%;

		}
	
	.uni-text{
		font-family: 微软雅黑;
		font-size: 45px;
	}
	
	.uni-form-item{
		
		margin-top: -30px;
		border-bottom: 1px solid;
		// border-radius: 50rpx;	
		width: 260px;
		height: 90rpx;
		background-color: rgb(253, 99, 66);
		left: -15px;
	}
	.icon{
		position: relative;
		left: -55px;
		top: 30px;
	}
	.input{		
		color: black;
		position: absolute;
		background-color: rgb(253, 99, 66);
		border-radius: 30px;
		top: 4px;
		left: 10px;
		text-align: center;
		width: 240px;
		height: 40px;
		// left: 60px;
		
	}

	.headImg{
		top: 100rpx;
		// right: 50rpx;
		width: 520rpx;
		position: relative;
	}
	
	.img{
		position: relative;
		top: 130rpx;
		width: 430rpx;
	}
	.content {
		background-color: rgb(253, 99, 66);
		display: flex;
		width: 100vw;
		height: 100vh;
	}

	.uniForm{
		width: 250px;
		left: 28%;
		top: 50%;
		position: absolute;
		// left: 350rpx;	
	}



</style>